<template>
  <el-row class="info">
    <!-- menu 0 -->
    <div v-if="item.kind == 0">
      <el-row v-if="item.level == 0">
        <el-col :span="2" class="tit2">
          {{ item.itemName + ":" }}
        </el-col>
      </el-row>
    </div>
    <!-- input 1 -->
    <div v-else-if="item.kind == 1">
      <MyAutoInput v-model="item.indicatorsActVal" v-if="item.dictId" :isFinish="isFinish"
                   :item="item" :labelWith="'120px'"></MyAutoInput>
      <el-form :ref="'form_' + item.itemName" v-else-if="item.required" :rules="rules" :model="item" label-width="120px">
        <el-form-item :label="item.itemName" prop="indicatorsActVal">
          <el-input v-model="item.indicatorsActVal"></el-input>
        </el-form-item>
      </el-form>
      <el-form :ref="'form_' + item.itemName" v-else :model="item" label-width="120px">
        <el-form-item :label="item.itemName">
          <el-input v-model="item.indicatorsActVal"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- textarea 2 -->
    <div v-else-if="item.kind == 2">
      <el-form :ref="'form_' + item.itemName" v-if="item.required" :rules="rules" :model="item" label-width="120px">
        <el-form-item :label="item.itemName" prop="indicatorsActVal">
          <el-input type="textarea" v-model="item.indicatorsActVal"></el-input>
        </el-form-item>
      </el-form>
      <el-form :ref="'form_' + item.itemName" :model="item" label-width="120px">
        <el-form-item :label="item.itemName">
          <el-input type="textarea" v-model="item.indicatorsActVal"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- radio 3 -->
    <el-col v-else-if="item.kind == 3" :span="24">
      <MyRadio
        v-model="item.indicatorsActVal"
        :item="item"
        :labelWith="'120px'"
        :isFinish="isFinish"
      ></MyRadio>
    </el-col>
    <!-- selector 4 -->
    <el-col v-else-if="item.kind == 4" :span="24">
      <MySelector
        v-model="item.indicatorsActVal"
        :item="item"
        :labelWith="'120px'"
        :isFinish="isFinish"
      ></MySelector>
    </el-col>
    <!-- switch btn 5 -->
    <el-col v-else-if="item.kind == 5" :span="6">
      <el-form :ref="'form_' + item.itemName" :rules="rules" :model="item" label-width="120px">
        <el-form-item :label="item.itemName" prop="indicatorsActVal">
          <el-switch v-model="item.indicatorsActVal"></el-switch>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- datapicker 5 -->
    <el-col v-else-if="item.kind == 6" :span="6">
      <el-form :ref="'form_' + item.itemName" :rules="rules" :model="item" label-width="120px">
        <el-form-item :label="item.itemName" prop="indicatorsActVal">
          <el-date-picker
            v-model="item.indicatorsActVal"
            type="datetime"
            :placeholder="item.itemName"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- checkbox 7 -->
    <el-col v-else-if="item.kind == 7" :span="24">
      <MyCheckBox v-model="item.indicatorsActVal" :item="item" :isFinish="isFinish"></MyCheckBox>
    </el-col>

    <div v-if="item.children && item.children.length > 0">
      <div v-for="(child, index) in item.children" :key="index">
        <Info :item="child" :isFinish="isFinish"></Info>
      </div>
    </div>
  </el-row>
</template>

<script>
import MySelector from "./mySelector";
import MyRadio from "./myRadio";
import MyCheckBox from "./myCheckBox";
import MyAutoInput from "./myAutoInput";

export default {
  name: "Info",
  components: {
    MyCheckBox,
    MySelector,
    MyRadio,
    MyAutoInput
  },
  props: {
    item: Object,
    isFinish:{
      type:Boolean,
      default:false
    },
  },
  created() {
  },
  data() {
    return {
      dataList: [],
      rules: {
        indicatorsActVal: [{required: true,message: '字段不能为空', trigger: 'blur'}],
      },
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.infoItem {
  .tit2 {
    text-align: right;
    float: left;
    font-size: 14px;
    color: #999;
    line-height: 40px;
    padding: 0 12px 0 0;
  }
  .el-form-item__label {
    width: 8.33333%;
    color: #999;
    font-weight: 400;
  }
}
</style>
